import { Button, Card, Col, Row } from '@douyinfe/semi-ui';
import React, { useEffect, useState } from 'react';
import { useIgnoreKeepAlive } from 'react-fiber-keep-alive';
import { useDispatch } from 'react-redux';
import {
  Route,
  Routes,
  useLocation,
  useNavigate,
  useNavigation,
  useParams,
} from 'react-router-dom';
import { setItem } from '@/redux/organize/organize-actions';
import OrganizeCard from './card';
import OrganizeProvider, { OrganizeConsumer } from './context';
import OrganizeEntityCard from './entity/entity-card';
import OrganizeEntityDialog from './entity/entity-dialog';

const OrganizePage = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch<any>();
  const location = useLocation();
  console.log(location);

  const PageEvents = {
    addRecord: () => {
      navigate('create');
    },
    detailRecord: (id: string, type = 'info', replace = false) => {
      dispatch(setItem(id));
      navigate(`detail/${id}/${type}`, {
        replace,
      });
    },
    editRecord: (uuid: string) => {
      navigate(`edit/${uuid}`);
    },
    delRecord: (uuid: string) => {
      console.log('del');
    },
  };

  return (
    <OrganizeProvider PageEvents={PageEvents}>
      <OrganizeConsumer>
        {({ showFloater, setShowFloater }) => (
          <>
            <Routes>
              <Route
                path='edit/:id'
                element={<OrganizeEntityCard editable />}
              />
              <Route path='detail/:id/:type' element={<OrganizeEntityCard />} />
              <Route path='create' element={<OrganizeCard />} />
              <Route index element={<OrganizeCard />} />
            </Routes>
            {showFloater && (
              <Card
                className='absolute end-3 top-3 bottom-3 w-1/5 shadow-2xl z-[1000]'
                bordered={false}>
                floater
                <Button onClick={() => setShowFloater(false)}>close</Button>
              </Card>
            )}
          </>
        )}
      </OrganizeConsumer>
      <Routes>
        <Route
          path='create'
          element={
            <OrganizeEntityDialog
              open
              editable
              onClose={() => {
                navigate('');
              }}
            />
          }
        />
      </Routes>
    </OrganizeProvider>
  );
};

export default OrganizePage;
